<template>
    <div class="blueButton">
        <button :class="{disabled:disabled}" @click="btnClick">{{text}}</button>
    </div>
</template>
<script>

// 蓝色按钮组件

// 组件模块
export default {
  name: 'blueButton',
  data () {
    return {
    }
  },
  // 数据接口 type:String Number Boolean Function Object Array Symbol
  props: {
    // 按钮显示文字
    text: {
      type: String,
      default: '提交'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    btnClick () {
      this.$emit('btnClick')
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
/* 这里面写样式 */
.blueButton{
    box-sizing: border-box;
    height: 1.2rem;
    background-color: #fff;
    padding: .2rem .3rem;
    button{
        height: .8rem;
        background-color: #3395FF;
        color: #fff;
        width: 100%;
        border-radius: .1rem;
        font-size: .34rem;
    }
    .disabled{
        background-color: #99caff;
    }
}
</style>
